<template>
    <div class="content bg-white" >

          <dc-header @submit="goAccount" :right-icon="'icon-textedite'| permissions('icon-textedite')"
                     :action-title="'记账' | permissions('记账')">
                     <span class="store-float" slot = "node" @click="$router.push('/shopAlter')">{{store.storeName}}
                <i class="iconfont icon-down downicon" ></i>
          </span>
                     </dc-header>
      <div class="content-body" ref="reports">
            <div class="home-content"
                 v-infinite-scroll="loadMore"
                 infinite-scroll-disabled="loading"
                 infinite-scroll-distance="100">
              <reports :menus="menus"></reports>
              <component :is="item" v-for="item in loadList" :key="item" class="mt20 pb20"></component>
              <div class="p20 bottom" v-show="loading && !loadingEnd"> 正在努力加载中...  </div>
              <div class="p10 bottom" v-show="loadingEnd"> 底部沒有了哦！</div>
            </div>
      </div>
          <dc-footer></dc-footer>
    </div>
</template>
<script>
  import header from '@/common/plugins/header';
  import footer from '@/common/plugins/footer';
  import reports from '@/components/home/reports';
  import api from '@/common/api/home';
  import comApi from '@/common/api/objective';
  import {mapActions, mapGetters} from 'vuex';
  //import {permissions} from '@/common/permission';

  export default {
    name: 'home',
    data () {
      return {
        menus: [],
        isShow: {
          M120001: 'bizanalyse',
          M120002: 'passengerCard',
          M120003: 'dishanalysis',
          M120004: 'financial',
          M120005: 'employeCard',
          M120006: 'riskAudit',
          M120007: 'storeCondition',
          M120008: 'takeout'
        },
        targetDatas: [],
        components: [],
        loading: false,
        loadingEnd: false,
        loadList: [],
        loadingNum: 2
      };
    },
    mounted () {
      this.loading = false;
      this.loadingEnd = false;
      this.loadList = [];
      this.loadingNum = 2;
      let param = 3 + (this.store.storeCode ? '/3' : '/1'); //单店还是多店
      api.getMenu(param).then(res => {
        this.menus = res[0].menus;
        this.components = [];
        this.menus.forEach(menu => {
          for (let key in this.isShow) {
            if (menu.menuCode === key) {
              this.components.push(this.isShow[key]);//为了保证与顶部模块顺序一致
            }
          }
        });
        this.loadList = [this.components[0], this.components[1]];
      });
      this.slides = this.$refs.reports;
      this.slides.addEventListener('touchstart', this.start, false);
    },
    activated () {
      this.slides = this.$refs.reports;
      this.slides.addEventListener('touchstart', this.start, false);
    },
    methods: {
      ...mapActions({setIndex: 'setIndex', clearDate: 'clearDate'}),
      goAccount () {
        //获取记账方式
        /*if (!permissions('记账')) {
          return;
        }*/
        comApi.getAccountType({}).then(res => {
          let accountUrl = res === 1 ? '/simAccountTool' : '/proAccountTool';
          this.$router.push(accountUrl);
        });
      },
      loadMore () {
        this.loading = true;
        let length = this.components.length;
        if (length === 0) {
          this.loading = false;
          return;
        }
        setTimeout(() => {
          if (this.components[this.loadingNum]) {
            let list = this.loadList.concat(this.components[this.loadingNum]);
            this.$set(this, 'loadList', list);
            this.loadingNum++;
            this.loading = false;
          } else {
            this.loadingEnd = true;
          }
        }, 20);
      },
      //滑动开始
      start (event) {
        var touch = event.targetTouches[0]; //touches数组对象获得屏幕上所有的touch，取第一个touch
        this.startPos = {x: touch.pageX, y: touch.pageY, time: new Date()}; //取第一个touch的坐标值
        this.isScrolling = 0; //这个参数判断是垂直滚动还是水平滚动
        this.slides.addEventListener('touchmove', this.touchMove, false);
      },
      touchMove (event) {
        //当屏幕有多个touch或者页面被缩放过，就不执行move操作
        if (event.targetTouches.length > 1 || (event.scale && event.scale !== 1)) {
          return false;
        }
        var touch = event.targetTouches[0];
        this.endPos = {x: touch.pageX - this.startPos.x, y: touch.pageY - this.startPos.y};
        this.isScrolling = Math.abs(this.endPos.x) < Math.abs(this.endPos.y) ? 1 : 0; //isScrolling为1时，表示纵向滑动，0为横向滑动
        if (this.isScrolling === 1) {
          //event.preventDefault(); //阻止触摸事件的默认行为，即阻止滚屏
          if (this.endPos.y > 0) {
            if (this.slides.scrollTop === 0) {
              event.preventDefault(); //阻止触摸事件的默认行为，即阻止滚屏
              if (Math.abs(this.endPos.y) > 50) {
                this.slides.removeEventListener('touchstart', this.start, false);
                this.slides.removeEventListener('touchmove', this.touchMove, false);
                this.$router.replace('/home/card');
              }
            } else {
              this.slides.removeEventListener('touchmove', this.touchMove, false);
            }
          } else {
            this.slides.removeEventListener('touchmove', this.touchMove, false);
          }
        }
      }
    },
    computed: {
      ...mapGetters(['index', 'store', 'userInfo', 'permission'])
    },
    beforeRouteLeave (to, from, next) {
      //清空存储的时间，避免进入风险稽查，菜品分析等页面时间缓存问题
      this.slides.removeEventListener('touchstart', this.start, false);
      this.slides.removeEventListener('touchmove', this.touchMove, false);
      this.clearDate();
      next();
    },
    components: {
      'dc-header': header,
      'dc-footer': footer,
      reports,
      'bizanalyse': resolve => {
        //异步组件写法
        require(['@/components/home/businessAnalysis/bsAnalysisCard'], resolve);
      },
      'dishanalysis': resolve => {
        require(['@/components/home/dishAnalysis/dishAnalysisCard'], resolve);
      },
      'employeCard': resolve => {
        require(['@/components/home/employees/employeCard'], resolve);
      },
      'passengerCard': resolve => {
        //异步组件写法
        require(['@/components/home/passenger/passengerCard'], resolve);
      },
      'storeCondition': resolve => {
        require(['@/components/home/storeCondition/storeCondition'], resolve);
      },
      'financial': resolve => {
        require(['@/components/home/financial/financialCard'], resolve);
      },
      'takeout': resolve => {
        require(['@/components/home/takeOut/takeBusinessCard'], resolve);
      },
      'riskAudit': resolve => {
        require(['@/components/home/riskAudit/riskCard'], resolve);
      }
    }
  };
</script>
<style lang="scss" scoped>
  @import '../../assets/css/variable';

  .store-float {
    // position: fixed;
    // z-index: 100;
    // left: 8px;
    // top: 10px;
    color: #333;
    font-size: px2rem(33px);
    font-weight: bold;
    white-space:nowrap;
    .downicon {
      font-size: px2rem(33px);
    }
  }
  .bottom {
    position: absolute;
    bottom: -30px;
    width: 100%;
    background: #f2f2f2;
    box-sizing: border-box;
  }
</style>


